$(document).ready(function() {
	$("#plbutton").click(function() {
		$("#productlist").slideToggle();
	});
});
function SendCar(carname) {/*点击汽车的系列名字出现图片的函数*/
	var i,temp1;
	$.post("SendCarMark.action", {
		CarName : carname
	}, function(data) {
		var len = data.jsonob1.length;
		var carpic = document.getElementById("Carpic");
		if (carpic.innerHTML != null || carpic.innerHTML != "") {
			carpic.innerHTML = "";
		}
		var l1,l2;
		var dd=document.createElement("div");
		for (i = 0; i < len; i+=2) {
			l1 = document.createElement("span");
			l1.innerHTML = "<img src='" + data.jsonob1[i] + "'" + "  " + "width='" + 160
			+ "'/>";
			temp1=data.jsonob1[i];
			l1.onclick = function() {
				addimg(temp1);/*添加图片动作*/
			};
			dd.appendChild(l1);
			if((i+1)<=(len-1)){
				l2 = document.createElement("span");
				l2.innerHTML = "<img src='" + data.jsonob1[i+1] + "'" + "  " + "width='" + 160
				+ "'/>";
				temp1=data.jsonob1[i+1];
				l2.onclick = function() {
					addimg(temp1);
				};
				dd.appendChild(l2);
			}
			dd.appendChild(document.createElement("br"));
		}
		carpic.appendChild(dd);
	}, "json");
}
function zhan1(can) {/* 一级展开函数，此处can参数是品牌的ID */
	var tt = "second" + can;
	var mm = "uu" + can;
	var gg = "tupian" + can;
	var ss = document.getElementById(tt);
	var uu = document.getElementById(mm);
	var tu = document.getElementById(gg);/* 一级展开图片的ID */
	var li;
	if (ss.style.display == "none" && ss.getAttribute("isclick") == "false") {
		$.post("dier.action", {/*dier.action：查找汽车名字*/
			id : can
		}, function(data) {/*如果一级还没展开，则展开一级菜单*/
			var len = data.jsonob.length;
			ss.style.display = "block";
			tu.src = "img/nolines_minus.gif";
			for ( var i = 0; i < len; i++) {
				li = document.createElement("li");
				li.innerHTML = "<a href='javascript:void(0);'>"
						+ data.jsonob[i].seriesName + "</a>";
				li.onclick = function(event) {
					SendCar(event.target.innerHTML);/*添加汽车名字的onclick动作*/
				};
				uu.appendChild(li);
			}
			ss.setAttribute("isclick", "true");
		}, "json");
	} else if (ss.style.display == "none"
			&& ss.getAttribute("isclick") == "true") {
		ss.style.display = "block";
	} else {
		tu.src = "img/nolines_plus.gif";
		ss.style.display = "none";
	}
}
var index = 0;
var arrayImg = new Array();
function addimg(url) {
	var div = document.createElement("div");
	div.setAttribute("class", "custom_main");
	div.setAttribute("id", "img" + index);// 添加图片
	arrayImg.push("img" + index);//添加图片到IMG数组
	var img = document.createElement("img");
	img.setAttribute("class", "custom_img");
	img.setAttribute("id", "pic" + index);
	img.setAttribute("src", url);
	var div2 = document.createElement("div");
	div2.style.height = "10px";
	var cancel = document.createElement("img");
	cancel.setAttribute("class", "custom_cancel");
	cancel.setAttribute("src", "img/cancel_03.png");
	var temp = index;
	cancel.addEventListener("click", function() {
		cancelimg(temp);
	}, false);
	div2.appendChild(cancel);
	div.appendChild(div2);
	div.appendChild(img);
	document.getElementById("bg").appendChild(div);
	document.getElementById("img" + index).style.width = document
			.getElementById("pic" + index).style.width;
	$(function() {
		$("#img" + index).css("width", $("#pic" + index).css("width"));
		$("#img" + index).mouseover(function() {
			$(this).children().eq(0).children().eq(0).fadeIn("slow");
		});
		$("#img" + index).mouseout(function() {
			$(this).children().eq(0).children().eq(0).fadeOut("slow");
		});
		$("#img" + index).draggable({
			containment : '#bg'
		});
		$("#pic" + index).resizable({
			stop : function() {
				$(this).parent().css("width", $(this).css("width"));
			}
		});
	});
	index++;
}
function addwordimg(url, width, height) {
	var div = document.createElement("div");
	div.setAttribute("class", "custom_main");
	div.setAttribute("id", "img" + index);//最外层DIV
	arrayImg.push("img" + index);
	var img = document.createElement("img");
	img.setAttribute("class", "custom_img");
	img.setAttribute("id", "pic" + index);
	img.setAttribute("src", url);
	var div2 = document.createElement("div");
	div2.style.height = "10px";
	var cancel = document.createElement("img");
	cancel.setAttribute("class", "custom_cancel");
	cancel.setAttribute("src", "img/cancel_03.png");
	var temp = index;//temp临时变量，用来保证cancel参数不变
	cancel.addEventListener("click", function() {
		cancelimg(temp);
	}, false);
	div2.appendChild(cancel);
	div.appendChild(div2);
	div.appendChild(img);
	document.getElementById("bg").appendChild(div);
	document.getElementById("img" + index).style.width = document
			.getElementById("pic" + index).style.width;
	$(function() {//拖动放大效果实现
		$("#pic" + index).css("width", width);
		$("#pic" + index).css("height", height);
		$("#img" + index).css("width", $("#pic" + index).css("width"));
		$("#img" + index).mouseover(function() {
			$(this).children().eq(0).children().eq(0).fadeIn("slow");
		});
		$("#img" + index).mouseout(function() {
			$(this).children().eq(0).children().eq(0).fadeOut("slow");
		});
		$("#img" + index).draggable({
			containment : '#bg'
		});//限制拖动范围为div#bg
		$("#pic" + index).resizable({
			stop : function() {//停止时改变DIV大小
				$(this).parent().css("width", $(this).css("width"));
			}
		});
	});
	index++;
}
function cancelimg(index) {
	for ( var i = 0; i < arrayImg.length; i++) {
		if (arrayImg[i] == "img" + index) {
			var j = arrayImg.splice(i, 1);
		}
	}
	document.getElementById("bg").removeChild(
			document.getElementById("img" + index));
}
// 鍒犻櫎鎵�湁鍥剧墖
function clearall() {
	for ( var i = 0; i < arrayImg.length; i++) {
		document.getElementById("bg").removeChild(
				document.getElementById(arrayImg[i]));
	}
}
// 鍥剧墖鍘熷ぇ灏�
var OriginImage = new Image();
function GetImageWidth(oImage) {
	if (OriginImage.src != oImage.src)
		OriginImage.src = oImage.src;
	return OriginImage.width;
}
function GetImageHeight(oImage) {
	if (OriginImage.src != oImage.src)
		OriginImage.src = oImage.src;
	return OriginImage.height;
}

// 棰滆壊閫夋嫨鍣�
var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF');
var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF',
		'FF00FF');
var current = null;
function initcolor(evt) {
	var colorTable = '';
	for (i = 0; i < 2; i++) {
		for (j = 0; j < 6; j++) {
			colorTable = colorTable + '<tr height=15>';
			colorTable = colorTable
					+ '<td width=15 style="background-color:#000000">';
			if (i == 0) {
				colorTable = colorTable
						+ '<td width=15 style="cursor:pointer;background-color:#'
						+ ColorHex[j] + ColorHex[j] + ColorHex[j]
						+ '" onclick="doclick(this.style.backgroundColor)">';
			} else {
				colorTable = colorTable
						+ '<td width=15 style="cursor:pointer;background-color:#'
						+ SpColorHex[j]
						+ '" onclick="doclick(this.style.backgroundColor)">';
			}
			colorTable = colorTable
					+ '<td width=15 style="background-color:#000000">';
			for (k = 0; k < 3; k++) {
				for (l = 0; l < 6; l++) {
					colorTable = colorTable
							+ '<td width=15 style="cursor:pointer;background-color:#'
							+ ColorHex[k + i * 3]
							+ ColorHex[l]
							+ ColorHex[j]
							+ '" onclick="doclick(this.style.backgroundColor)">';
				}
			}
		}
	}
	colorTable = '<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: '
			+ 'collapse" bordercolor="000000" width="300px" style="cursor:pointer;">'
			+ colorTable + '</table>';
	document.getElementById("colorpane").innerHTML = colorTable;
	var current_x = document.getElementById("custom_color").offsetLeft - 280;
	var current_y = document.getElementById("custom_color").offsetTop;
	// alert(current_x + "-" + current_y)
	document.getElementById("colorpane").style.left = current_x + "px";
	document.getElementById("colorpane").style.top = current_y + "px";
}
function doclick(obj) {
	document.getElementById("custom_color").style.background = obj;
	document.getElementsByName("color")[0].value = obj;
	document.getElementById("colorpane").style.display = "none";
}
function coloropen() {
	document.getElementById("colorpane").style.display = "";
}

function addword() {
	$.ajax({
		url : "word2pic.action",
		data : $('#addword').serialize(),
		type : "post",
		success : function(data) {
			addwordimg(data.filename, data.width, data.height);
		}
	});

}

function yulan() {/*预览*/
	var bodyWidth = document.body.clientWidth;
	var bodyHeight = document.body.clientHeight;

	// wait pic display
	var loading = document.getElementById("loading_img");
	loading.style.display = "block";
	loading.style.top = bodyHeight / 2 - 16 + "px";
	loading.style.left = bodyWidth / 2 - 16 + "px";

	// make picture
	var bgimg = document.getElementById("bg").style.backgroundImage.replace(
			/url\((.*?)\)/ig, "$1");
	var imgObj = "";
	for ( var i = 0; i < arrayImg.length; i++) {
		var j = arrayImg[i].substring(3, arrayImg[i].length);
		var imgurl = document.getElementById("pic" + j).src;
		var width = parseInt(document.getElementById("pic" + j).style.width);
		var height = parseInt(document.getElementById("pic" + j).style.height);
		var top = parseInt(document.getElementById(arrayImg[i]).style.top);
		var left = parseInt(document.getElementById(arrayImg[i]).style.left);
		imgObj = imgObj + '{' + '"picurl":"' + imgurl + '","width":"' + width
				+ '","height":"' + height + '","top":"' + top + '","left":"'
				+ left + '"' + '}';
		/*imgObj用一个字符串表示图片位置信息，调用CustomDao的drawPic画出一张图片*/
		if (i != arrayImg.length - 1)
			imgObj = imgObj + ',';
	}
	imgObj = "[" + imgObj + "]";
	var swidth = parseInt(document.body.scrollWidth);
	$.ajax({
		url : "preview.action",
		data : {
			bgPic : bgimg,
			swidth : swidth,
			pi : imgObj
		},
		type : "post",
		success : function(data) {//显示预览层
			$("#loading_img").fadeOut("slow");
			$("#fancybox-overlay").fadeIn("slow");
			$("#fancybox-img").attr("src", data.filename);/*data.filename预览图片*/
			$("#fancybox-wrap").fadeIn("slow");
		}
	});
}
function viewclose() { 
	$("#fancybox-overlay").fadeOut("slow");
	$("#fancybox-wrap").fadeOut("slow");
}
var customname="";
function getCustomName(){
	customname=prompt("请给您的设计取个名字：","");
	if(customname!=null&&customname!=""){
		saveCustom();
	}
}

function saveCustom(){ //保存设计
	var bgimg = document.getElementById("bg").style.backgroundImage.replace(
			/url\((.*?)\)/ig, "$1");
	var imgObj = "";
	for ( var i = 0; i < arrayImg.length; i++) {
		var j = arrayImg[i].substring(3, arrayImg[i].length);
		var imgurl = document.getElementById("pic" + j).src;
		var width = parseInt(document.getElementById("pic" + j).style.width);
		var height = parseInt(document.getElementById("pic" + j).style.height);
		var top = parseInt(document.getElementById(arrayImg[i]).style.top);
		var left = parseInt(document.getElementById(arrayImg[i]).style.left);
		imgObj = imgObj + '{' + '"picurl":"' + imgurl + '","width":"' + width
				+ '","height":"' + height + '","top":"' + top + '","left":"'
				+ left + '"' + '}';
		/*imgObj用一个字符串表示图片位置信息，调用CustomDao的drawPic画出一张图片*/
		if (i != arrayImg.length - 1)
			imgObj = imgObj + ',';
	}
	imgObj = "[" + imgObj + "]";
	var swidth = parseInt(document.body.scrollWidth);
	$.ajax({
		url : "saveCustom.action",
		data : {
			bgPic : bgimg,
			swidth : swidth,
			pi : imgObj,
			customName:customname
		},
		type : "post",
		success : function(data) {
			alert("您的设计已经保存，将转到您的个人中心查看");
			window.location.href="ShowMyCustom.action";
		}
	});
}
function redesign(id){
	$.ajax({
		url:"redesign",
		data:{
			customId:id
		},
		type:"post",
		//dataType:"json",
		success:function(data){
			alert("asd");
		},
		error:function(XMLResponse){
			alert(arguments[0])
			alert(arguments[1]);}
	});
}
